<script setup>
// import { h } from 'snabbdom'
import { onBeforeUnmount, ref, shallowRef, toRefs ,watch} from 'vue'
// import { IButtonMenu } from '@wangeditor/core'
import { Boot, } from '@wangeditor/editor'
import { Editor, Toolbar, } from '@wangeditor/editor-for-vue'
import { toolbarKeys } from './toolbar';
const props = defineProps({
    modelValue: String,

})
const { modelValue } = toRefs(props)

// 编辑器实例，必须用 shallowRef ，重要！
const editorRef = shallowRef()



// 内容 HTML
const valueHtml = ref('')

watch(modelValue,(newValue,oldValue)=>{
    if (newValue) valueHtml.value = newValue

})

// 编辑器配置
const editorConfig = {
    placeholder: '请输入内容...',

    MENU_CONF: {
        uploadImage: {
            base64LimitSize: 10 * 1024 * 1024,
        },
    }
}

// 工具栏配置
const toolbarConfig = {
    // showLinkImg = false,
    // uploadImgShowBase64 = true,
    toolbarKeys: toolbarKeys,
    excludeKeys: [
        'video',
        'insertVideo',
        'uploadVideo'
    ],
    // insertKeys: {
    //     index: 0,
    //     keys: 'my-menu-1'
    // }
}

// 编辑器回调函数
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！

    // window.editor = editor // 临时测试使用，用完删除
}
const handleChange = (editor) => {
    // console.log("change:", editor.children);
}
const handleDestroyed = (editor) => {
    // console.log('destroyed', editor)
}
const handleFocus = (editor) => {
    // console.log('focus', editor)
}
const handleBlur = (editor) => {
    // console.log('blur', editor)
}
const customAlert = (info, type) => {
    // alert(`【自定义提示】${type} - ${info}`)
}
const customPaste = (editor, event, callback) => {
    // console.log('ClipboardEvent 粘贴事件对象', event)
    const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
    const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
    const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）


    // 自定义插入内容
    editor.insertText(text)

    // 返回值（注意，vue 事件的返回值，不能用 return）
    callback(false) // 返回 false ，阻止默认粘贴行为
    // callback(true) // 返回 true ，继续默认的粘贴行为
}

// 及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return

    // 销毁，并移除 editor
    editor.destroy()
})

const getHtml = () => {
    const editor = editorRef.value
    if (editor == null) return

    console.log(editor.getHtml())
}

defineExpose({
    valueHtml
})
</script>

<template>
    <div style="border: 1px solid #ccc">
        <!-- 工具栏 -->
        <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px solid #ccc" />
        <!-- 编辑器 -->
        <Editor v-model="valueHtml" :defaultConfig="editorConfig" @onChange="handleChange" @onCreated="handleCreated"
            @onDestroyed="handleDestroyed" @onFocus="handleFocus" @onBlur="handleBlur" @customAlert="customAlert"
            @customPaste="customPaste" style="height: 500px" />
    </div>
</template>

<style src="@wangeditor/editor/dist/css/style.css">
</style>
